<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API连接测试</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 40px; }
        .test-section { margin: 20px 0; padding: 15px; border: 1px solid #ccc; border-radius: 5px; }
        .success { background-color: #d4edda; border-color: #c3e6cb; }
        .error { background-color: #f8d7da; border-color: #f5c6cb; }
        button { margin: 5px; padding: 10px 15px; }
        pre { background: #f8f9fa; padding: 10px; border-radius: 3px; overflow-x: auto; }
    </style>
</head>
<body>
    <h1>AI聊天系统API连接测试</h1>
    
    <div class="test-section">
        <h3>测试1: 直接连接后端</h3>
        <button onclick="testDirectBackend()">测试后端健康检查</button>
        <div id="direct-result"></div>
    </div>
    
    <div class="test-section">
        <h3>测试2: 测试代理连接</h3>
        <button onclick="testProxyBackend()">测试代理到后端</button>
        <div id="proxy-result"></div>
    </div>
    
    <div class="test-section">
        <h3>测试3: AI模型列表</h3>
        <button onclick="testAiModels()">获取AI模型列表</button>
        <div id="models-result"></div>
    </div>
    
    <div class="test-section">
        <h3>测试4: AI聊天功能</h3>
        <button onclick="testAiChat()">发送AI聊天请求</button>
        <div id="chat-result"></div>
    </div>

    <script>
        async function testDirectBackend() {
            const resultDiv = document.getElementById('direct-result');
            try {
                const response = await fetch('http://127.0.0.1:8000/health');
                const data = await response.json();
                resultDiv.innerHTML = `<div class="success">✅ 直接连接成功: <pre>${JSON.stringify(data, null, 2)}</pre></div>`;
            } catch (error) {
                resultDiv.innerHTML = `<div class="error">❌ 直接连接失败: ${error.message}</div>`;
            }
        }
        
        async function testProxyBackend() {
            const resultDiv = document.getElementById('proxy-result');
            try {
                const response = await fetch('/health');
                const data = await response.json();
                resultDiv.innerHTML = `<div class="success">✅ 代理连接成功: <pre>${JSON.stringify(data, null, 2)}</pre></div>`;
            } catch (error) {
                resultDiv.innerHTML = `<div class="error">❌ 代理连接失败: ${error.message}</div>`;
            }
        }
        
        async function testAiModels() {
            const resultDiv = document.getElementById('models-result');
            try {
                const response = await fetch('/api/ai/models');
                const data = await response.json();
                resultDiv.innerHTML = `<div class="success">✅ AI模型列表获取成功: <pre>${JSON.stringify(data, null, 2)}</pre></div>`;
            } catch (error) {
                resultDiv.innerHTML = `<div class="error">❌ AI模型列表获取失败: ${error.message}</div>`;
            }
        }
        
        async function testAiChat() {
            const resultDiv = document.getElementById('chat-result');
            try {
                const response = await fetch('/api/ai/chat', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        message: '你好，这是一个测试消息',
                        modelId: 'qwen-turbo'
                    })
                });
                const data = await response.json();
                resultDiv.innerHTML = `<div class="success">✅ AI聊天成功: <pre>${JSON.stringify(data, null, 2)}</pre></div>`;
            } catch (error) {
                resultDiv.innerHTML = `<div class="error">❌ AI聊天失败: ${error.message}</div>`;
            }
        }
    </script>
</body>
</html>